<template>
  <div>
    <van-button v-if="!isRecording" @click="startRecording" class="icons_button"
      ><van-icon size="25" name="volume-o"
    /></van-button>
    <van-button v-else @click="stopRecording" class="icons_button"
      ><van-icon size="25" name="stop-circle-o"
    /></van-button>
    <audio v-if="audioUrl" :src="audioUrl" controls></audio>
    <div v-if="transcript">{{ transcript }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { fetchTranscript } from '@/api/assitOnline'
// 实现聊天中的语音转文字功能通常涉及前端录音功能、后端服务或第三方API进行语音识别，以及前端显示转换后的文本。以下是一个简化的实现流程：
// 首先，你需要一个前端组件来捕获用户的语音输入。这通常通过浏览器的MediaRecorder API来实现。
const isRecording = ref(false)
const mediaRecorder = ref(null)
const audioChunks = ref([])
const audioUrl = ref(null)
const transcript = ref('')

const startRecording = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
    mediaRecorder.value = new MediaRecorder(stream)
    audioChunks.value = []
    mediaRecorder.value.ondataavailable = (event) => {
      audioChunks.value.push(event.data)
    }

    mediaRecorder.value.onstop = () => {
      const audioBlob = new Blob(audioChunks.value, { type: 'audio/wav' })
      audioUrl.value = URL.createObjectURL(audioBlob)
      console.log('audioBlob: ', audioBlob)
      recognizeSpeech(audioBlob)
    }

    mediaRecorder.value.start()
    isRecording.value = true
  } catch (error) {
    console.error('Error accessing media devices.', error)
  }
}

const stopRecording = () => {
  mediaRecorder.value.stop()
  isRecording.value = false
}

// 这是一个占位函数，你需要将其替换为调用你实际的后端API或第三方语音识别服务的代码
const recognizeSpeech = async (audioBlob) => {
  // 这里应该调用你的后端API或第三方语音识别服务
  // 假设你有一个函数叫 fetchTranscript，它会返回转换后的文本
  const response = await fetchTranscript(audioBlob)
  transcript.value = response.transcript
}

// 注意：fetchTranscript 函数需要你自己实现，它应该发送音频数据到你的后端服务或第三方API，并返回识别结果
</script>
<style scoped lang='scss'>
.icons_button {
  // margin-bottom: 5px;
  width: 35px;
  height: 35px;
  background-color: #eee;
  margin-right: 5px;
}
</style>